<!--  -->
<template>
  <div>
    计划任务

    {{ datas }}

    <el-table :data="datas[0]" style="width: 100%">
      <el-table-column fixed prop="name" label="name" width="150" />
    </el-table>

    <button @click="abc">aa</button>
    <button @click="abc2">aa2</button>
    {{  tableData.list }}

    <el-table :data="tableData.list" style="width: 100%">
    <el-table-column fixed prop="time" label="Date" width="150" />

     <el-table-column v-for="item in week"  :label="item" width="120" >
       <template #default="scope">

       <!-- {{ scope.row[item] }} -->

       <div v-for="item2 in scope.row[item]">

         {{ item2.serviceName }}
        
       </div>
          <!-- <el-tag v-for="item in scope.row[scope.column.label]" :key="item.id" >
            {{ item.serviceName }}
          </el-tag> -->
       </template>
     </el-table-column>


    <!-- <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="320" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" /> -->
  </el-table>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'

interface ServiceSchedule {
  id: number;
  companyId: number;
  elderlyId: number;
  startTime: string; // Could also use specific time type if needed
  endTime: string;   // Could also use specific time type if needed
  week: string;      // Could be more specific like "周一" | "周二" | etc. if limited options
  day: string;       // Empty in this example, purpose unclear
  serviceId: number;
  type: string;      // Could be more specific like "周循环" | "日循环" | etc. if limited options
  serviceName: string;
  staffId: number;
  state: number;     // Could be boolean if it's just 0/1 for active/inactive
}

const datas=ref({}) as any;
const abc=()=>{


  datas.value[0]=[{
    name:'aa'
  }]
console.log( datas.value);

 

}
const abc2=()=>{


 
datas.value[0].push({
  name:'bb'
})



}
// interface TaskData {
//   code: number;
//   msg: string;
//   data: ServiceSchedule[];
// }


// const tableData=reactive<{list:Record<string,string|ServiceSchedule>[]}>({
//      list:[]
// })

const week=ref(['周一','周二','周三','周四','周五','周六','周日']);


const tableData:any=reactive({
     list:[]
})


const initData=()=>{

    //调接口

let res:any=
   [
            {
                "id": 2644,
                "companyId": 1469,
                "elderlyId": 1374,
                "startTime": "17:03:00",
                "endTime": "18:03:00",
                "week": "周二",
                "day": "",
                "serviceId": 707,
                "type": "周循环",
                "serviceName": "保洁",
                "staffId": 0,
                "state": 0
            },
            {
                "id": 2643,
                "companyId": 1469,
                "elderlyId": 1374,
                "startTime": "16:58:00",
                "endTime": "17:58:00",
                "week": "周二",
                "day": "",
                "serviceId": 730,
                "type": "周循环",
                "serviceName": "睡觉",
                "staffId": 0,
                "state": 0
            }

     ]


    let _list:any=[]

    for (let i = 0; i < 24; i++) {

        let item:any={
          time:(i<12 ? '上午' : '下午')+i+"时",
            value:i<10 ? '0'+i : i
        }
        
  

        for (let j = 0; j < week.value.length; j++) {


            item[week.value[j]]=  res.filter((item2:any)=>item2.type='周循环' && item2.startTime.slice(0,2)==item.value && item2.week==week.value[j])
            
            // item[week[j]]=[];
        }

        _list.push(item)
    }
    
    tableData.list=_list
}


initData();




</script>
<style scoped>
</style>